<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElLoading, ElMessage} from "element-plus";

const headers = {
  Authorization: localStorage.getItem("auth")
}
//选择的当前系列
const currentSeries = ref({});
//定义表格的引用
const SeriesTableRef = ref();
//系列相关数据加载中
const SeriesLoading = ref(true);
const Series = ref([]);
//从接口获取系列数据
const getSeries = () => {
  SeriesLoading.value = true;
  axios.post("/api/series/get",
      {},{headers}).then(response => {
    console.log(response.data.value);
    Series.value = response.data.value;
    SeriesLoading.value = false;

  }).catch(error => {
    console.log("获取失败", error.response);
    SeriesLoading.value = false;
  })
}
getSeries();

//表示单击行
const handleRowClick = row => {
  if(row != undefined){
    SeriesTableRef.value.data.forEach(r => {
      SeriesTableRef.value.toggleRowSelection(r, r.id == row.id);
    })
    currentSeries.value = row;
  }
  }

//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  if (multipleSelection.value.length == 1) {
    currentSeries .value = multipleSelection.value[0];
  } else {
    currentSeries .value = {};
  }
}
//控制新增/修改系列对话框是否显示
const dialogEditSeriesVisible = ref(false);

//新增按钮点击事件
const addSeries = () => {
  currentSeries.value = {
    id:0
  };
  dialogEditSeriesVisible.value = true;
}
//保存
const saveSeries = () => {
  console.log("点击了保存", currentSeries.value);
  let loading = ElLoading.service({
    lock: true,
    text: '处理中...',
  })
  axios.post("/api/series/save", currentSeries.value, {headers}
  ).then(response => {
    console.log("保存成功");
    loading.close();
    dialogEditSeriesVisible.value = false;
    getSeries();
    ElMessage({
      message: "保存成功",
      type: 'success',
    })
  }).catch(error => {
    console.log("保存失败", error.response);
    ElMessage({
      message: error.response.data.message,
      type: 'warning',
    })
  })
}


//删除按钮加载中
const btnRemoveLoading = ref(false);
//删除藏品
const removeSeries = () => {
  // console.log("你选中的行有：", multipleSelection.value);
  multipleSelection.value.forEach(series => {
    btnRemoveLoading.value = true;
    axios.get("/api/series/remove?id="+series.id, {headers}).then(response => {
      console.log("删除成功");
      getSeries();
      btnRemoveLoading.value = false;
      ElMessage({
        message: "删除成功",
        type: 'success',
      })
    }).catch(error => {
      console.log("删除失败", error.response);
      btnRemoveLoading.value = false;
      ElMessage({
        message: error.response.data.message,
        type: 'warning',
      })
    })
  })
}


//修改按钮点击事件
const updateSeries = () => {
  dialogEditSeriesVisible.value = true;
}
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>藏品中心</el-breadcrumb-item>
    <el-breadcrumb-item>系列管理</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
      </div>
      <div>
        <el-button type="primary" @click="addSeries" >新增</el-button>
        <el-button type="default" @click="updateSeries" :disabled="multipleSelection.length != 1">修改</el-button>
        <el-popconfirm title="确认删除吗？"
                       confirm-button-text="是"
                       cancel-button-text="否"
                       @confirm="removeSeries">
          <template #reference>
            <el-button type="warning" :disabled="multipleSelection.length == 0" :loading="btnRemoveLoading">删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div>
      <template v-if="Series!= null">
        <el-table :data="Series"
                  v-loading="SeriesLoading"
                  row-key="id"
                  ref="SeriesTableRef"
                  @current-change="handleRowClick"
                  @selection-change="handleSelectionChange"
                  stripe
                  highlight-current-row
                  empty-text="暂无数据"
                  style="width: 100%">
          <el-table-column type="selection" />
          <el-table-column prop="id" label="系列ID"/>
          <el-table-column prop="name" label="系列名称"/>
        </el-table>
      </template>
    </div>
  </div>
  <el-dialog
      v-model="dialogEditSeriesVisible"
      :title="(currentSeries.id == 0 ? '新增' : '修改') + '系列'"
      width="400" align-center>

    <tr>
      <td>系列名称:</td>
      <td>
        <el-input v-model="currentSeries.name"/>
      </td>
    </tr>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogEditSeriesVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSeries">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>